import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addNewTaskAction } from '../store/action/todo';

export default function Header() {
  // 5.1 声明state
  const [task, setTask] = useState('');

  const dispatch = useDispatch();

  // 5.3 监听回车事件
  // 💥 利用vscode内置DOM的类型，快速获取事件对象的类型
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // 💥TS在提示keyCode要被废弃了，使用key
    if (e.key === 'Enter') {
      // 6.4 通过dispach触发action函数
      dispatch(addNewTaskAction({ id: Date.now(), isDone: false, task }));
      // 6.5 清空input的值
      setTask('');
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
        // 5.2 控制inpt的value和onChange
        value={task}
        onChange={(e) => setTask(e.target.value)}
        onKeyDown={handleKeyDown}
      />
    </header>
  );
}
